<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="ByteDesk.com 微客服 在线客服系统 微信客服系统 智能客服系统 即时通讯云 企业协作系统 工单系统 App android ios 苹果 安卓 微信 微信公众平台 微服务 android iOS 微客服 App客服  App在线客服 App 在线咨询 移动开发者服务平台 微客服  在线客服  微博 新浪微博 微信 微语 聊天 移动聊天 免费 发信息 发图片 语音 weixin 离线消息 微博 私信 流量" />
    <meta name="description" content="ByteDesk.com 微客服 卓越的在线客服系统 微信客服系统 智能客服系统 即时通讯云 企业协作系统 工单系统 android ios 苹果 安卓 微信 微信公众平台 微服务 微客服 App在线客服 App在线咨询 android iOS 安卓 移动开发者服务平台 一款跨平台的在线客服工具。支持多个微博、绑定多个账号。通过获取微博用户关系链、粉丝、好友，挖掘潜在客户。" />
    <meta name="author" content="ByteDesk.com">
    <link rel="icon" href="/favicon.ico">

    <!-- this is header-css -->
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--iconfont.cn-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_761687_xivxue5rikg.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/jq/kefu.css}" />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
    <!--[if lte IE 9]>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js'></script>
    <![endif]-->

    <title><span th:utext="#{title}" th:remove="tag"></span> · <span th:utext="#{slogan}" th:remove="tag"></span></title>

</head>

<body>

    <!--TODO: 适配微信-->
    <div id="app-wrapper">
        <div id="app">

            <!-- 导航 -->
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">萝卜丝</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="nav-item" style="cursor: pointer;">
                                <a class="nav-link" onclick="utils.switchAgent()">人工客服</a>
                            </li>
                            <li class="nav-item" style="cursor: pointer;">
                                <a class="nav-link" onclick="utils.switchLeaveMessage()">我要留言</a>
                            </li>
                            <li class="nav-item" style="cursor: pointer;">
                                <a class="nav-link" onclick="utils.switchRobot()">自助答疑</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a class="nav-link" onclick="httpapi.closeWebPage()" style="color: white;">
                                    <span style="cursor: pointer;"><i class="iconfont icon-close"></i></span>
                                </a>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </nav>

            <!--主区域-->
            <main id="main" role="main">

                <!-- main + bottom + rightSide-->
                <div id="content" class="row">

                    <!--根据屏幕大小显示与隐藏 https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854-->
                    <div id="byteDesk-chat">

                        <!--消息记录pc-->
                        <div id="message-pc" class="row">
                            <ul id="message-ul" class="message-ul">
                            </ul>
                        </div>

                        <!--输入框pc-->
                        <div id="input-pc" class="row">

                            <div id="input-emoji-box" class="input-emoji-box" style="display: none;">
                                <li><img src="img/emoji/100.gif" onclick="utils.emotionClicked('[微笑]')"></li>
                                <li><img src="img/emoji/101.gif" onclick="utils.emotionClicked('[撇嘴]')"></li>
                                <li><img src="img/emoji/102.gif" onclick="utils.emotionClicked('[色]')"></li>
                                <li><img src="img/emoji/103.gif" onclick="utils.emotionClicked('[发呆]')"></li>
                                <li><img src="img/emoji/104.gif" onclick="utils.emotionClicked('[得意]')"></li>
                                <li><img src="img/emoji/105.gif" onclick="utils.emotionClicked('[流泪]')"></li>
                                <li><img src="img/emoji/106.gif" onclick="utils.emotionClicked('[害羞]')"></li>
                                <li><img src="img/emoji/107.gif" onclick="utils.emotionClicked('[闭嘴]')"></li>
                                <li><img src="img/emoji/108.gif" onclick="utils.emotionClicked('[睡]')"></li>
                                <li><img src="img/emoji/109.gif" onclick="utils.emotionClicked('[大哭]')"></li>

                                <li><img src="img/emoji/110.gif" onclick="utils.emotionClicked('[尴尬]')"></li>
                                <li><img src="img/emoji/111.gif" onclick="utils.emotionClicked('[发怒]')"></li>
                                <li><img src="img/emoji/112.gif" onclick="utils.emotionClicked('[调皮]')"></li>
                                <li><img src="img/emoji/113.gif" onclick="utils.emotionClicked('[呲牙]')"></li>
                                <li><img src="img/emoji/114.gif" onclick="utils.emotionClicked('[惊讶]')"></li>
                                <li><img src="img/emoji/115.gif" onclick="utils.emotionClicked('[难过]')"></li>
                                <li><img src="img/emoji/116.gif" onclick="utils.emotionClicked('[酷]')"></li>
                                <li><img src="img/emoji/117.gif" onclick="utils.emotionClicked('[冷汗]')"></li>
                                <li><img src="img/emoji/118.gif" onclick="utils.emotionClicked('[抓狂]')"></li>
                                <li><img src="img/emoji/119.gif" onclick="utils.emotionClicked('[吐]')"></li>

                                <li><img src="img/emoji/120.gif" onclick="utils.emotionClicked('[偷笑]')"></li>
                                <li><img src="img/emoji/121.gif" onclick="utils.emotionClicked('[愉快]')"></li>
                                <li><img src="img/emoji/122.gif" onclick="utils.emotionClicked('[白眼]')"></li>
                                <li><img src="img/emoji/123.gif" onclick="utils.emotionClicked('[傲慢]')"></li>
                                <li><img src="img/emoji/124.gif" onclick="utils.emotionClicked('[饥饿]')"></li>
                                <li><img src="img/emoji/125.gif" onclick="utils.emotionClicked('[困]')"></li>
                                <li><img src="img/emoji/126.gif" onclick="utils.emotionClicked('[惊恐]')"></li>
                                <li><img src="img/emoji/127.gif" onclick="utils.emotionClicked('[流汗]')"></li>
                                <li><img src="img/emoji/128.gif" onclick="utils.emotionClicked('[憨笑]')"></li>
                                <li><img src="img/emoji/129.gif" onclick="utils.emotionClicked('[悠闲]')"></li>

                                <li><img src="img/emoji/130.gif" onclick="utils.emotionClicked('[奋斗]')"></li>
                                <li><img src="img/emoji/131.gif" onclick="utils.emotionClicked('[咒骂]')"></li>
                                <li><img src="img/emoji/132.gif" onclick="utils.emotionClicked('[疑问]')"></li>
                                <li><img src="img/emoji/133.gif" onclick="utils.emotionClicked('[嘘]')"></li>
                                <li><img src="img/emoji/134.gif" onclick="utils.emotionClicked('[晕]')"></li>
                                <li><img src="img/emoji/135.gif" onclick="utils.emotionClicked('[疯了]')"></li>
                                <li><img src="img/emoji/136.gif" onclick="utils.emotionClicked('[衰]')"></li>
                                <li><img src="img/emoji/137.gif" onclick="utils.emotionClicked('[骷髅]')"></li>
                                <li><img src="img/emoji/138.gif" onclick="utils.emotionClicked('[敲打]')"></li>
                                <li><img src="img/emoji/139.gif" onclick="utils.emotionClicked('[再见]')"></li>

                                <li><img src="img/emoji/140.gif" onclick="utils.emotionClicked('[擦汗]')"></li>
                                <li><img src="img/emoji/141.gif" onclick="utils.emotionClicked('[抠鼻]')"></li>
                                <li><img src="img/emoji/142.gif" onclick="utils.emotionClicked('[鼓掌]')"></li>
                                <li><img src="img/emoji/143.gif" onclick="utils.emotionClicked('[糗大了]')"></li>
                                <li><img src="img/emoji/144.gif" onclick="utils.emotionClicked('[坏笑]')"></li>
                                <li><img src="img/emoji/145.gif" onclick="utils.emotionClicked('[左哼哼]')"></li>
                                <li><img src="img/emoji/146.gif" onclick="utils.emotionClicked('[右哼哼]')"></li>
                                <li><img src="img/emoji/147.gif" onclick="utils.emotionClicked('[哈欠]')"></li>
                                <li><img src="img/emoji/148.gif" onclick="utils.emotionClicked('[鄙视]')"></li>
                                <li><img src="img/emoji/149.gif" onclick="utils.emotionClicked('[委屈]')"></li>

                                <li><img src="img/emoji/150.gif" onclick="utils.emotionClicked('[快哭]')"></li>
                                <li><img src="img/emoji/151.gif" onclick="utils.emotionClicked('[阴险]')"></li>
                                <li><img src="img/emoji/152.gif" onclick="utils.emotionClicked('[亲亲]')"></li>
                                <li><img src="img/emoji/153.gif" onclick="utils.emotionClicked('[吓]')"></li>
                            </div>

                            <div class="input-pc-buttons">
                                <li class="iconfont icon-emoji bd-input-emoji" onclick="utils.switchEmotion()"></li>
                                <!-- 上传图片：https://segmentfault.com/q/1010000000156312 -->
                                <input type="file" id="imagefile" style="display: none;"/>
                                <li class="iconfont icon-image bd-input-image" onclick="utils.showUploadDialog()"></li>
                                <!--<li class='iconfont icon-clear bd-message-clear' onclick="utils.clearMessages()"></li>-->
                                <li class="iconfont icon-rate bd-message-rate" onclick="utils.switchRate()"></li>
                                <li id="bd-message-tip" class="bd-message-tip">对方正在输入</li>
                            </div>

                            <div id="inputarea" class="inputarea">
                                <textarea id="inputcontent" class="inputcontent" placeholder="请输入内容" onkeyup="utils.onKeyUp(arguments[0] || window.event)"></textarea>
                            </div>

                            <div id="input-pc-send" onclick="stompapi.sendTextMessage()">
                                <span>发送</span>
                            </div>

                            <div id="byteDesk-logo">
                                <img id="byteDesk-connected-image" src="https://bytedesk.oss-cn-shenzhen.aliyuncs.com/util/disconnected.png" style="margin-top: 3px; height: 12px; width: 12px;" />
                                <a href="https://www.bytedesk.com" target="_blank">客服软件由萝卜丝提供</a>
                            </div>

                        </div>

                        <!-- <div id="input-mobile" class="row"></div> -->

                    </div>

                    <!-- 评价 -->
                    <div id="byteDesk-rate" style="display: none;">
                        <p>感谢您的咨询，请为本次服务进行评价：</p>
                        <div id="ratestar">
                            <img id="ratestar1" style="cursor: pointer;" src="img/rate/ratestar_selected.png" onclick="utils.rateStarChoose(1)">
                            <img id="ratestar2" style="cursor: pointer;" src="img/rate/ratestar_selected.png" onclick="utils.rateStarChoose(2)">
                            <img id="ratestar3" style="cursor: pointer;" src="img/rate/ratestar_selected.png" onclick="utils.rateStarChoose(3)">
                            <img id="ratestar4" style="cursor: pointer;" src="img/rate/ratestar_selected.png" onclick="utils.rateStarChoose(4)">
                            <img id="ratestar5" style="cursor: pointer;" src="img/rate/ratestar_selected.png" onclick="utils.rateStarChoose(5)">
                        </div>
                        <div id="ratescore"></div>
                        <p>附言:</p>
                        <div id="suggest" class="suggestarea">
                            <textarea id="suggestcontent" style="width: 48%; height: 66px;"></textarea>
                        </div>
                        <div class="rate-button" onclick="httpapi.rate()">提交</div>
                        <div class="rate-button" onclick="utils.hideRate()">取消</div>
                    </div>

                    <!-- 留言 -->
                    <div id="byteDesk-leave" style="display: none;">

                        <div style="width: 30%; margin: auto; margin-top: 60px;">
                            <table>
                                <tr>
                                    <td>手机</td>
                                    <td><input id="leavemsgmobile" class="leavemsginput" type="text" name="mobile"/></td>
                                </tr>
                                <tr>
                                    <td>邮箱</td>
                                    <td><input id="leavemsgemail" class="leavemsginput" type="text" name="email"/></td>
                                </tr>
                                <tr>
                                    <td>留言</td>
                                    <td><textarea id="leavemsgcontent" class="leavemsgtext"></textarea></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <div class="leave-message-button" onclick="httpapi.leaveMessage()">提交</div>
                                        <div class="leave-message-button" onclick="utils.hideLeaveMessage()">取消</div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>

                    <!--右侧信息 - rightSide-->
                    <div id="byteDesk-right" class="d-none d-md-block">
                        <div id="byteDesk-split"></div>
                        <div id="byteDesk-faq">
                            <div style="margin-top: 10px;">常见问题</div>
                            <ul id="byteDesk-question" style="margin-top: 10px; margin-left: -20px; text-align: left;">
                            </ul>
                        </div>
                    </div>

                </div>

            </main>

        </div>
    </div>


    <!-- Minified version of `es6-promise-auto` below. -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.18/ua-parser.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/1.8.0/fingerprint2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

    <script src="/js/vendor/stomp/1.2/stomp.min.js"></script>

    <script type="text/javascript" src="/js/jq/data.js"></script>
    <script type="text/javascript" src="/js/jq/utils.js"></script>
    <script type="text/javascript" src="/js/jq/httpapi.js"></script>
    <script type="text/javascript" src="/js/jq/stompapi.js"></script>
    <script type="text/javascript" src="/js/jq/kefu.js"></script>

</body>

</html>
